// 19.6 路由鉴权 封装组件
// 19.7 权限控制-支持登录后回跳路由
// 19.8 升级鉴权路由, 支持原生的route 属性透传
import React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';
import { hasToken } from '../../utils/storage';

//19.6.1 提取props类型, 支持component 和path
// 19.8.1 改造type 为 interface 继承routeProps
export interface AuthRouteProps extends RouteProps {
  component: React.FC<any>;
  path: string;
}

export type AuthLocationStateType = {
  from: string;
};

// 封装路由鉴权组件
export function AuthRoute(props: AuthRouteProps) {
  const { component: Comp, path, ...resProps } = props;
  return (
    <Route
      // 19.8.2 透传回去
      {...resProps}
      path={path}
      //2. 通过render 方法控制 , 是否返回组件
      render={(_props) => {
        // 判断是否有token
        if (hasToken()) {
          return <Comp {..._props} />;
        }
        //如果没有 ,直接跳转路由 或者返回重定向组件
        // 19.7.1 通过 state 存储重定向前的页面路径，用于登录成功后回跳
        return (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: path } as AuthLocationStateType,
            }}
          />
        );
      }}
    />
  );
}
